<template>
  <div class="m-forget">
    <!--logo  -->
    <div class="m-header">
      <div class="fl logo"><img src="../assets/icon-bg.png"/></div>
      <div class="logo-detail"><span>商家中心</span><span class="icon">|</span><span>MerChant Center</span></div>
    </div>
    <!--主体  -->
    <div class="m-content">
      <div class="container">
        <w-form-validate class="forget">
          <h3 class="title">找回密码</h3>
          <!--手机  -->
          <div class="input-box clearfix phone">
            <span class="fl icon"><img src="../assets/icon-mobile.png"/></span>  
            <w-input class="fl input-phone" :border="false" :maxlength="11" holder="请输入手机号码" type="text" :validate="false" v-model="username" @input="validatePhone(false)"></w-input>
          </div>
          <!--验证码  -->
          <div class="input-box clearfix code">
            <div class="fl input-code">
              <span class="fl icon"><img src="../assets/icon-key.png"/></span>
              <w-input class="fl" type="text" :border="false" :validate="false" v-model="code" holder="请输入验证码"></w-input>
            </div>
            <div class="fr">
              <w-button-timer class="getCode" :clickable="clickable" @on-click="getCode"></w-button-timer>
            </div>
          </div> 
          <!--设置密码  -->
          <div class="input-box clearfix password">
            <span class="fl icon"><img src="../assets/icon-password.png"/></span>  
            <w-input class="fl input-phone" :maxlength="16" type="password" :border="false" :validate="false" v-model="password" holder="设置新密码"></w-input>
          </div>
          <div class="input-box clearfix new-password">
            <span class="fl icon"><img src="../assets/icon-password.png"/></span>  
            <w-input class="fl input-phone" :maxlength="16" type="password" :border="false" :validate="false" v-model="confirmPassword" holder="请再次确认密码"></w-input>
          </div>
          <div class="submit"><button class="btn" @click="login">提交</button></div>
          <div class="fr"><router-link to="/login" class="login">登录</router-link></div>
        </w-form-validate>
      </div>
    </div>
  </div>
</template>

<script>
// 导入发送消息对象
import { apiSendMsg, apiForgetPwd } from '../common/api.js'

// 导入toast
import app from '../main.js'

// 导入校验规则
import rule from '../components/Input/rule.js'

export default {
  data() {
    return {
      username: '',
      password: '',
      code: '',
      confirmPassword: '',
      clickable: false
    }
  },
  methods: {
    /**
     * 校验手机号码。校验成功，则允许点击发送验证码
     *
     * @params {Boolean} isToast 是否弹框提示
     */
    validatePhone(isToast) {
      // 如果没有输入手机号，则toast提示
      if (rule.isMobile(this.username, 'error')) {
        // 不可点击发送验证码
        this.clickable = false

        // 如果是需要弹框提示的，则弹框提示
        if (isToast) {
          app.$toast('亲，请输入正确的手机号码')
        }
        return false
      }

      // 如果校验通过，则可以点击
      this.clickable = true
      return true
    },

    /**
     * 校验密码
     */
    validatePassWord() {
      // 校验密码失败，则toast提示
      if (rule.isPassword(this.password, 'error')) {
        app.$toast('请输入6-16位的密码，字母、数字或两者组合')
        return false
      }

      // 如果前后密码输入的不一致
      if (this.password != this.confirmPassword) {
        app.$toast('新密码与确认密码不一致')
        return false
      }
      return true
    },

    /**
     * 校验验证码
     */
    validateCode() {
      // 如果验证码没有输入，则弹框提示
      if (!this.code) {
        app.$toast('请输入验证码')
        return false
      }

      // 验证码校验失败，则弹框提示
      if (this.code.length != 6) {
        app.$toast('请输入正确格式的验证码')
        return false
      }
      return true
    },

    /**
     * 获取短信验证码
     */
    getCode() {
      // 首先校验密码
      if (!this.validatePhone(true)) {
        return
      }

      // 请求接口
      apiSendMsg(this.username).then((data) => {
        // 如果用户不存在，则不再发送数据
        if (data == '311') {
          this.clickable = false
          return
        }
      })
    },

    /**
     * 点击登录
     */
    login() {
      // 校验手机号失败，则不操作
      if (!this.validatePhone(true)) {
        return
      }

      // 校验验证码
      if (!this.validateCode()) {
        return
      }

      // 校验密码
      if (!this.validatePassWord()) {
        return
      }

      // 调用忘记密码接口，设置成功，跳转到登录页面
      apiForgetPwd(this.username, this.code, md5(this.password)).then((data) => {
        // 提示成功消息
        app.$toast('设置密码成功')

        // 等待一秒后跳转到登录也
        setTimeout(() => {
          this.$router.push('/login')
        }, 1000)
      })
    },

    onTimer() {
      return
    }
  },
  watch: {
    username(newVal, oldVal) {
      if (/(^1[0-9]{10}$)/.test(newVal)) {
        this.clickable = true
      } else {
        this.clickable = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../scss/_var.scss';
  .icon {
    margin-top: 4px;
  }
  input.form-control {
    border: none;
    background-color: transparent;
  }
  input:-moz-placeholder {
    font-size: 16px;
    color: $color-gray;
  }
  .btn-ghost.main {
    border: none;
    background-color: #418fff;
    color: $color-white;
    border-radius: 0 4px 4px 0;
    height: 46px;
    font-size: 16px;
  }
  .m-forget {
    background-color: $color-white;
    overflow-y: auto;
    min-height: 610px;
    width: 100%;
    height: 100%;
    z-index: 13;

    .m-header {
      padding: 34px 0 34px 120px;
      .logo {
        display: inline-block;
      }
      .logo-detail {
        display: inline-block;
        margin-left: 30px;
        font-size: 24px;
        span {
          vertical-align: sub;
          &.icon {
            margin: 0 20px;
          }
        }
      }
    }
    .m-content {
      background: url('../assets/bg.png') no-repeat;
      background-size: cover;
      height: calc(100% - 102px);
    }
  }
  // 找回密码主体
  .container {
    width: 1000px;
    height: 100%;
    position: relative;

    .input-phone {
      width: 266px;
      margin-left: 6px;
    }

    .forget {
      border-radius: 10px;
      background-color: $color-white;
      width: 418px;
      height: 486px;
      padding: 37px 40px 0 40px;
      position: absolute;
      right: 0px;
      top: calc(50% - 246px);

      .title {
        font-size: 20px;
        color: $color-gray;
      }

      .input-box {
        width: 100%;
        background-color: #fafafa;
        border-radius: 5px;

        &.phone {
          margin: 20px auto 25px;
          padding: 8px 24px;
        }

        &.code {
          .input-code {
            padding: 8px 0 8px 24px;
          }
          .getCode {
            width: 104px;
          }
        }
        &.password {
          margin: 30px auto 20px;
          padding: 8px 24px;
        }

        &.new-password {
          padding: 8px 24px;
        }
      }
      .submit {
        margin: 58px auto 12px;
        .btn {
          background-color: $color-pink;
          color: $color-white;
          width: 100%;
          height: 50px;
          font-size: 20px;
        }
      }
      .login {
        color: $color-pink;
      }
    }
  }
</style>
